<template>
  <input type="text" v-model="keyword">
  <h3>{{keyword}}</h3>
</template>

<script>
import {ref,customRef} from 'vue'
export default {
  name: 'App',
  setup(){
    // 自定义ref
    function myRef(value){
      return customRef((track,trigger)=>{
        let timer = null;
        return {
          get(){
            console.log('数据被读取~')
            track(); //通知vue追踪value的变化
            return value
          },
          set(newValue){
            console.log('数据被修改~',newValue);
            clearInterval(timer)
            timer = setInterval(()=>{
              value = newValue
              trigger(); //通知vue去重新解析模板
            },1000)
          }
        }
      })
    }

    let keyword = myRef('hello')
    
    return {
      keyword
    }
  }
}
</script>

<style>

</style>
